<template>
  <view class="content">
    <!-- 地图容器 -->
  <!--   <view class="map-container">
      <map 
        style="width: 100%; height: 100vh;" 
        :latitude="latitude" 
        :longitude="longitude" 
        :markers="covers"
        show-location>
      </map>
    </view> -->
    
    <!-- 扫描按钮 -->
    <view class="scan-btn-container">
      <button class="button scan" @tap="startScan">
        <text class="icon icon-scan"></text>
        扫描二维码
      </button>
    </view>
    
    <!-- 添加古树按钮 -->
    <view class="add-tree-btn-container">
      <button class="button add-tree" @tap="showAddTreeForm">
        <text class="icon icon-add"></text>
        添加古树
      </button>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue'

// 地图相关数据
const latitude = ref(39.909)
const longitude = ref(116.39742)

const covers = ref([{
  latitude: 39.909,
  longitude: 116.39742,
  iconPath: '/static/icon/map-icon/green.png'
}])

// 扫描功能
const startScan = () => {
  uni.scanCode({
    success: (res) => {
      handleScanResult(res.result)
    },
    fail: (err) => {
      console.error('扫描失败:', err);
    }
  });
}

const handleScanResult = (scanData) => {
  uni.navigateTo({
    url: `./TreeDetail/TreeDetail?data=${encodeURIComponent(scanData)}`
  });
}

// 保护等级选项
const protectionLevels = ref([
  { label: '一级保护', value: 1 },
  { label: '二级保护', value: 2 },
  { label: '三级保护', value: 3 },
  { label: '四级保护', value: 4 },
  { label: '五级保护', value: 5 }
])


// 显示添加古树表单
const showAddTreeForm = () => {
  uni.navigateTo({
    url: '/pages/index/Addtree/Addtree'
  });
}
</script>

<style lang="scss">
.container {
  display: flex;
  flex-direction: column;
  height: 100vh;
}

.map-container {
  flex: 1;
  width: 100%;
}

.scan-btn-container {
  position: absolute;
  bottom: 100rpx;
  left: 0;
  right: 0;
  padding: 0; 
  z-index: 100;
}

.add-tree-btn-container {
  position: absolute;
  bottom: 0rpx;
  left: 0;
  right: 0;
  padding: 0; 
  z-index: 100;
}

.button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 80rpx;
  font-size: 28rpx;
  border-radius: 0; 
  color: #fff;

  .icon {
    font-size: 40rpx;
    margin-right: 6rpx;
  }
}

.scan {
  background-color: #28bb9c;
  opacity: 0.9;
}

.add-tree {
  background-color: #409eff;
  opacity: 0.9;
}
</style>